<template>
	<view class="update-pwd">
		<NavBar title="修改密码"/>
		<view class="form-box flex-center flex-column">
			<wd-form ref="formRef" :model="formData">
			  <wd-input
			    label="旧密码"
			    label-width="100px"
			    prop="password"
			    show-password
			    v-model="formData.password"
			    placeholder="请输入旧密码"
			    :rules="[{ required: true, message: '请填写旧密码' }]"
			  />
				<wd-input
				  label="新密码"
				  label-width="100px"
				  prop="new_password"
				  show-password
				  v-model="formData.new_password"
				  placeholder="请输入新密码"
				  :rules="[{ required: true, message: '请填写新密码' }]"
				/>
			</wd-form>
			<wd-button class="btn" @tap="submit"> 登 录 </wd-button>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import NavBar from '@/components/NavBar.vue';
	import { editPwdApi } from '@/api'
	import { useUserStore } from '@/store'
	const formRef = ref()
	const formData = ref({
		password: '',
		new_password: ''
	})
	const submit = () => {
		const { userInfo, LOGOUT } = useUserStore()
		formRef.value.validate().then(({ valid }) => {
			if(valid) {
				const params = {
					...formData.value,
					uid: userInfo.uid
				}
				editPwdApi(params).then(res => {
					LOGOUT()
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.message
					})
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.update-pwd {
		padding: 20rpx 24rpx;
		.form-box {
			gap: 60rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.btn {
				width: 60%;
			}
		}
	}
</style>
